<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link href="../../third-party/bootstrap/css/bootstrap.min.css" rel="stylesheet" >
    <script src="../../third-party/jquery-1.10.2.min.js"></script>
    <script src="../../third-party/bootstrap/js/bootstrap.bundle.min.js" ></script>
    <script src="../../third-party/bootstrap/js/jszip.min.js"></script>
    <script src="../../third-party/bootstrap/js/docx-preview.js"></script>
</head>
<body>
<div class="container" style="margin-top: 20px">
    <form action="">
        <div class="mb-3">
            <label for="wordFile">docx文件
                <br>
                <span style="color: red;font-size: 12px;">
                    请上传docx格式文件，非此格式文件可将此文件打开之后另存为docx格式
                </span>
            </label>
            <input type="file" class="form-control" id="wordFile" onchange="onGetFile(this)" accept=".docx" >
        </div>
        <div class="mb-3">
            <label for="content">内容预览</label>
            <div id="content"></div>
        </div>
    </form>
</div>
<!--页面中一定要引入internal.js为了能直接使用当前打开dialog的实例变量-->
<!--internal.js默认是放到dialogs目录下的-->
<script type="text/javascript" src="../../dialogs/internal.js"></script>
<script>
    $(function () {
        dialog.onok = function () {
            // 插入正文内容
            editor.execCommand('inserthtml', $("#content").html());
        }
    });
    function onGetFile(el) {
        var file = el.files[0]

        var options = { inWrapper: false, ignoreWidth: true, ignoreHeight: true } // https://github.com/VolodymyrBaydalka/docxjs#api
        docx.renderAsync(file, document.getElementById("content"), null, options)
            .then(x => console.log("docx: finished"));
    }
</script>
</body>
</html>
